/*----------------doughtut.less(start)----------------*/
/*基础样式*/
.doughtut{
    width: @px50;
    height: @px50;
    position: relative;
}
.doughtut-label{
	position: absolute;
	top:50%;
	left: 50%;
	width: 100%;
	text-align: center;
	-webkit-transform:translate(-50%,-50%);
	font-size: @px12;
    color: @primary-bg;
}
.doughtut-wrapper {
    width: @px25;
    height: @px50;
    position: absolute;
    top: 0;
    overflow: hidden;
}
.doughtut-wrapper.left{
    left:0;
}
.doughtut-wrapper.right{
    right:0;
}
.doughtut-circle{
    width: @px44;
    height: @px44;
    border: @px3 solid @placeholder;
    border-radius: 50%;
    position: absolute;
    top: 0;
}
.doughtut-circle.right{
    border-top: @px3 solid @primary-bg;
    border-right: @px3 solid @primary-bg;
    right: 0;
    -webkit-transform: rotate(-135deg);

    -webkit-animation-timing-function:linear;
    -webkit-animation-fill-mode:forwards;
}
.doughtut-circle.left{
    border-bottom: @px3 solid @primary-bg;
    border-left: @px3 solid @primary-bg; 
    left: 0;
    -webkit-transform: rotate(-135deg);

    -webkit-animation-timing-function:linear;
    -webkit-animation-fill-mode:forwards;
}

/*旋转*/
@-webkit-keyframes rotate360_right{
    0%{
        -webkit-transform: rotate(-135deg);
    }
    100%{
        -webkit-transform: rotate(45deg);
    }
}
@-webkit-keyframes rotate360_left{
    0%{
        -webkit-transform: rotate(-135deg);
    }
    100%{
        -webkit-transform: rotate(45deg);
    }
}
.doughtut.rotate360 .doughtut-circle.right{
    -webkit-animation-duration:500ms;

    -webkit-animation-name:rotate360_right;
}
.doughtut.rotate360 .doughtut-circle.left{
    -webkit-animation-delay:500ms;
    -webkit-animation-duration:500ms;
    
    -webkit-animation-name:rotate360_left;
}

@-webkit-keyframes rotate315_right{
    0%{
        -webkit-transform: rotate(-135deg);
    }
    100%{
        -webkit-transform: rotate(45deg);
    }
}
@-webkit-keyframes rotate315_left{
    0%{
        -webkit-transform: rotate(-135deg);
    }
    100%{
        -webkit-transform: rotate(-35deg);
    }
}
.doughtut.rotate315 .doughtut-circle.right{
    -webkit-animation-duration:500ms;

    -webkit-animation-name:rotate315_right;
}
.doughtut.rotate315 .doughtut-circle.left{
    -webkit-animation-delay:500ms;
    -webkit-animation-duration:250ms;
    
    -webkit-animation-name:rotate315_left;
}

@-webkit-keyframes rotate45_right{
    0%{
        -webkit-transform: rotate(-135deg);
    }
    100%{
        -webkit-transform: rotate(-50deg);
    }
}
.doughtut.rotate45 .doughtut-circle.right{
    -webkit-animation-duration:250ms;

    -webkit-animation-name:rotate45_right;
}
.doughtut.rotate45 .doughtut-circle.left{
    -webkit-animation-name:none;
}

@-webkit-keyframes rotate15_right{
    0%{
        -webkit-transform: rotate(-135deg);
    }
    100%{
        -webkit-transform: rotate(-108deg);
    }
}
.doughtut.rotate15 .doughtut-circle.right{
    -webkit-animation-duration:200ms;

    -webkit-animation-name:rotate15_right;
}
.doughtut.rotate15 .doughtut-circle.left{
    -webkit-animation-name:none;
}

/*颜色*/
.doughtut{
    /*蓝色*/
    &.blue .doughtut-circle{
        border: @px3 solid #c6eefb;
    }
    &.blue .doughtut-label{
        color: #41c6f1;
    }
    &.blue .doughtut-circle.left{
        border-bottom: @px3 solid #41c6f1;
        border-left: @px3 solid #41c6f1; 
    }
    &.blue .doughtut-circle.right{
        border-top: @px3 solid #41c6f1;
        border-right: @px3 solid #41c6f1;
    }
    /*绿色*/
    &.green .doughtut-circle{
        border: @px3 solid #c7ffe8;
    }
    &.green .doughtut-label{
        color: #01cd78;
    }
    &.green .doughtut-circle.left{
        border-bottom: @px3 solid #01cd78;
        border-left: @px3 solid #01cd78; 
    }
    &.green .doughtut-circle.right{
        border-top: @px3 solid #01cd78;
        border-right: @px3 solid #01cd78;
    }
    /*黄色*/
    &.yellow .doughtut-circle{
        border: @px3 solid #ffe8c7;
    }
    &.yellow .doughtut-label{
        color: #ffa628;
    }
    &.yellow .doughtut-circle.left{
        border-bottom: @px3 solid #ffa628;
        border-left: @px3 solid #ffa628; 
    }
    &.yellow .doughtut-circle.right{
        border-top: @px3 solid #ffa628;
        border-right: @px3 solid #ffa628;
    }
    /*橙色*/
    &.orange .doughtut-circle{
        border: @px3 solid #ffdbcd;
    }
    &.orange .doughtut-label{
        color: #ff915b;
    }
    &.orange .doughtut-circle.left{
        border-bottom: @px3 solid #ff915b;
        border-left: @px3 solid #ff915b; 
    }
    &.orange .doughtut-circle.right{
        border-top: @px3 solid #ff915b;
        border-right: @px3 solid #ff915b;
    }
    /*红色*/
    &.red .doughtut-circle{
        border: @px3 solid #ffbab1;
    }
    &.red .doughtut-label{
        color: #ff7664;
    }
    &.red .doughtut-circle.left{
        border-bottom: @px3 solid #ff7664;
        border-left: @px3 solid #ff7664; 
    }
    &.red .doughtut-circle.right{
        border-top: @px3 solid #ff7664;
        border-right: @px3 solid #ff7664;
    }
    /*灰色*/
    &.gray .doughtut-circle{
        border: @px3 solid #e0e0e0;
    }
    &.gray .doughtut-label{
        color: #acacac;
    }
    &.gray .doughtut-circle.left{
        border-bottom: @px3 solid #e0e0e0;
        border-left: @px3 solid #e0e0e0; 
    }
    &.gray .doughtut-circle.right{
        border-top: @px3 solid #e0e0e0;
        border-right: @px3 solid #e0e0e0;
    }
}
/*----------------doughtut.less(end)----------------*/